<template>
    <el-row class="res-selector">
        <el-col :span="12">
            <el-tree
                :data="mediaClasses"
                :props="{ value: 'id', label: 'name', children: 'subClasses' }"
                @node-click="selectClass"
            ></el-tree>
        </el-col>
        <el-col :span="12">
            <el-tooltip
                v-for="image in materialImages"
                :key="image.id"
                placement="right"
                :content="image.name ? image.name : image.originFileName"
            >
                <img :src="`/api/${image.fileUrl}`" @click="selectImage(image)" width="100%">
            </el-tooltip>
        </el-col>
    </el-row>
</template>
<script>
import { mapGetters, mapActions, mapMutations } from 'vuex'

export default {
    name: 'res-selector',
    computed: {
        ...mapGetters(['evidenceImages', 'mediaClasses', 'materialImages'])
    },
    methods: {
        ...mapActions(['getMediaClasses', 'getEvidenceImages', 'getMaterialImages', 'getEvidence']),
        selectImage(image) {
            this.$emit('itemSelect', image)
        },
        selectClass(node) {
            const { id, classParentId } = node
            const classIds = []
            if (classParentId) {
                classIds.push(classParentId)
            }
            classIds.push(id)
            this.getMaterialImages({ classIds })
        }
    },
    mounted() {
        this.getMediaClasses()
    }
}
</script>
<style lang="less">
.res-selector {
    width: 400px;
    min-height: 400px;
    max-height: 50vh;
    overflow-y: hidden;
    .el-col {
        overflow-y: scroll;
        min-height: 400px;
        max-height: 50vh;
    }
}
</style>
